<template>
  <div class="navigation-bar">
    <div class="nav-container">
      <!-- 品牌标志和标题 -->
      <div class="brand-section">
        <div class="logo-wrapper">
          <img src="../assets/img/logo.png" class="logo-image" alt="融销通" />
        </div>
        <div class="brand-text">
          <span class="primary-text">农产品</span>
          <span class="secondary-text">融销一体平台</span>
        </div>
      </div>

      <!-- 导航菜单 -->
      <div class="menu-section">
        <el-menu
          :default-active="$store.state.activeIndex"
          mode="horizontal"
          @select="handleSelect"
          background-color="transparent"
          text-color="var(--text-primary)"
          active-text-color="var(--primary-color)"
        >
          <el-menu-item index="1" @click="frontBtn">
            <i class="el-icon-s-home"></i> 首页
          </el-menu-item>
          <el-menu-item index="2" @click="goodsBtn">
            <i class="el-icon-shopping-bag-1"></i> 商品货源
          </el-menu-item>
          <el-menu-item index="3" @click="purchaseBtn">
            <i class="el-icon-shopping-cart-2"></i> 求购需求
          </el-menu-item>
          <el-menu-item index="4" @click="knowledgesBtn">
            <i class="el-icon-reading"></i> 农业知识
          </el-menu-item>
          <el-menu-item index="5" @click="guideBtn">
            <i class="el-icon-user"></i> 专家指导
          </el-menu-item>
          <el-menu-item index="6" @click="shopCartBtn">
            <i class="el-icon-shopping-cart-full"></i> 购物车
          </el-menu-item>
          
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-money"></i> 融资申请
            </template>
            <el-menu-item index="7-1" @click.native="smartMatchBtn">
              <i class="el-icon-connection"></i> 智能匹配
            </el-menu-item>
            <el-menu-item index="7-2" @click.native="financingBtn">
              <i class="el-icon-document"></i> 融资申请
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

      <!-- 用户操作区 -->
      <div class="user-section">
        <template v-if="$store.state.loginUserNickname == ''">
          <el-button type="text" @click="Login" class="auth-btn">
            <i class="el-icon-user"></i> 登录
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="primary" @click="Register" class="auth-btn">
            <i class="el-icon-plus"></i> 注册
          </el-button>
        </template>
        <template v-else>
          <el-dropdown trigger="click">
            <div class="user-profile">
              <el-avatar :size="32" :src="$store.state.loginUserAvatar || defaultAvatar">
                用户
              </el-avatar>
              <span class="user-name">{{ $store.state.loginUserNickname }}</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <el-dropdown-item @click.native="userPage">
                <i class="el-icon-user"></i> 个人中心
              </el-dropdown-item>
              <el-dropdown-item @click.native="userManage" v-if="$store.getters.isAdmin">
                <i class="el-icon-s-custom"></i> 用户管理
              </el-dropdown-item>
              <el-dropdown-item @click.native="goodsManage" v-if="$store.getters.isAdmin">
                <i class="el-icon-s-goods"></i> 商品管理
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">
                <i class="el-icon-switch-button"></i> 退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
let Base64 = require("js-base64");
export default {
  data() {
    return {
      avatar: "",
      defaultAvatar: require("../assets/img/default-avatar.svg")
    };
  },
  methods: {
    handleSelect(key, keyPath) {},
    Login() {
      this.$router.push("/login");
    },
    Register() {
      this.$router.push("/register");
    },
    logout() {
      this.$store.commit("updateLoginUserNickname", "");
      this.$store.commit("removeStorage");
      this.$router.push("/home").catch((err) => err);
      if (sessionStorage.getItem("/order/needs/pageCode")) {
        sessionStorage.removeItem("/order/needs/pageCode");
      }
      if (sessionStorage.getItem("/order/goods/pageCode")) {
        sessionStorage.removeItem("/order/goods/pageCode");
      }
      if (sessionStorage.getItem("/user/search/pageCode")) {
        sessionStorage.removeItem("/user/search/pageCode");
      }
    },
    frontBtn() {
      this.$router.push("/home/front").catch((err) => err);
    },
    purchaseBtn() {
      this.$router.push("/home/purchase").catch((err) => err);
    },
    goodsBtn() {
      this.$router.push("/home/goods").catch((err) => err);
    },
    knowledgesBtn() {
      this.$router.push("/home/knowledge").catch((err) => err);
    },
    guideBtn() {
      this.$router.push("/home/guide").catch((err) => err);
    },
    shopCartBtn() {
      this.$router.push("/home/shopcart").catch((err) => err);
    },
    userPage() {
      this.$router.push("/home/user").catch((err) => err);
    },
    addMessagePage() {
      this.$router.push("/home/addmessage").catch((err) => err);
    },
    handleAbout() {
      this.$router.push("/home/aboutUs").catch((err) => err);
    },
    goodsManage() {
      this.$router.push("/home/userGood/publishedgoodsAdmin").catch((err) => err);
    },
    userManage() {
      this.$router.push("/home/usermanage").catch((err) => err);
    },
    financingBtn() {
      this.$router.push("/home/financing").catch((err) => err);
    },
    smartMatchBtn() {
      this.$router.push("/home/smartMatch").catch((err) => err);
    },
  },
  created() {
    this.$store.commit("updateActiveIndex", "1");
    if (window.localStorage.token) {
      let token = window.localStorage.token;
      let arr = token.split(".");
      let res = Base64.decode(arr[1]);
      this.$store.commit("updateLoginUserNickname", JSON.parse(res).nickname);
      this.$store.commit("updateLoginUserAvatar", JSON.parse(res).avatar);
      this.$store.commit("updateRole", JSON.parse(res).role);
    }
  },
};
</script>

<style lang="less" scoped>
.navigation-bar {
  width: 100%;
  background-color: var(--background-light);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 1000;
  
  .nav-container {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 70px;
  }
  
  .brand-section {
    display: flex;
    align-items: center;
    
    .logo-wrapper {
      margin-right: 15px;
      
      .logo-image {
        height: 40px;
        width: auto;
        transition: transform 0.3s ease;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
    
    .brand-text {
      display: flex;
      flex-direction: column;
      
      .primary-text {
        font-size: 18px;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 1.2;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }
      
      .secondary-text {
        font-size: 14px;
        color: var(--text-secondary);
        font-weight: 500;
      }
    }
  }
  
  .menu-section {
    flex: 1;
    display: flex;
    justify-content: center;
    
    .el-menu {
      border-bottom: none;
      background-color: transparent !important;
      
      .el-menu-item {
        height: 70px;
        font-size: 15px;
        font-weight: 500;
        padding: 0 15px;
        transition: all 0.3s;
        
        i {
          margin-right: 5px;
          font-size: 16px;
        }
        
        &:hover, &.is-active {
          background-color: rgba(124, 112, 255, 0.1) !important;
          color: var(--primary-color) !important;
          border-bottom: 2px solid var(--primary-color);
          text-shadow: 0 0 8px rgba(124, 112, 255, 0.5);
        }
      }
      
      .el-submenu {
        .el-submenu__title {
          height: 70px;
          line-height: 70px;
          font-size: 15px;
          font-weight: 500;
          
          i {
            margin-right: 5px;
            font-size: 16px;
            color: inherit;
          }
          
          &:hover {
            background-color: rgba(124, 112, 255, 0.1) !important;
            color: var(--primary-color) !important;
            text-shadow: 0 0 8px rgba(124, 112, 255, 0.5);
          }
        }
      }
    }
  }
  
  .user-section {
    display: flex;
    align-items: center;
    
    .auth-btn {
      margin: 0 5px;
      font-size: 14px;
      
      i {
        margin-right: 5px;
      }
    }
    
    .user-profile {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 20px;
      transition: background-color 0.3s;
      
      &:hover {
        background-color: var(--card-background);
      }
      
      .el-avatar {
        background-color: var(--primary-color);
        color: white;
        font-weight: 600;
      }
      
      .user-name {
        margin: 0 10px;
        font-size: 14px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.user-dropdown {
  .el-dropdown-item {
    i {
      margin-right: 8px;
    }
  }
}

@media screen and (max-width: 768px) {
  .navigation-bar {
    .nav-container {
      flex-direction: column;
      height: auto;
      padding: 10px;
    }
    
    .brand-section {
      margin-bottom: 10px;
    }
    
    .menu-section {
      width: 100%;
      overflow-x: auto;
      
      .el-menu {
        width: 100%;
        white-space: nowrap;
        
        .el-menu-item, .el-submenu__title {
          height: 50px;
          line-height: 50px;
        }
      }
    }
    
    .user-section {
      margin-top: 10px;
    }
  }
}

.el-form-item__label {
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
</style>
